<template>
  <view class="bazi-template">
    <view class="cm-text-14" :style="[templateStyle]" v-if="isLoaded">
      <!-- 区域检查组件 -->
      <view :id="idPrefix + navData[0].id"></view>
      <!-- 个人信息 -->
      <cm-label-text label="姓名" label-width="80" border-split border-top border-bottom>{{ bazi.userName }}</cm-label-text>
      <view class="cm-flex">
        <view class="cm-w-50 app-border-color_ex-right">
          <cm-label-text label="性别" label-width="80" border-split border-bottom>{{ bazi.sex }}</cm-label-text>
        </view>
        <view class="cm-w-50">
          <cm-label-text label="年龄" label-width="80" border-split border-bottom>{{ bazi.age }}</cm-label-text>
        </view>
      </view>
      <cm-label-text label="公历生日" label-width="80" border-split border-bottom>{{ solarTimeText }}</cm-label-text>
      <cm-label-text label="农历生日" label-width="80" border-split border-bottom>{{ lunarTimeText }}</cm-label-text>
      <view class="cm-flex cm-margin-bottom-20">
        <view class="cm-w-50 app-border-color_ex-right">
          <cm-label-text label="星座" label-width="80" border-split border-bottom>{{ bazi.date.star }}</cm-label-text>
        </view>
        <view class="cm-w-50">
          <cm-label-text label="属相" label-width="80" border-split border-bottom>{{ bazi.date.ganzhi[0].zhi.shengxiao }}</cm-label-text>
        </view>
      </view>
      
      <view class="app-border-color_ex-top">
        <cm-switch v-model="isDestinyShow" label-width="200" label="是否展示大运流年" @change="destinyShowHandler"></cm-switch>
      </view>
      <!-- 区域检查组件 -->
      <view :id="idPrefix + navData[1].id"></view>
      <!-- 四柱吸顶 -->
      <cm-sticky cm-class="app-card-bg-color_bg" :top="CustomBar" @sticky="stickyHandler">
        <view :id="stickyId">
          <cm-label-text label-width="50"
            border-top border-bottom border-split content-no-padding>
            <view class="cm-flex cm-text-center">
              <view class="cm-flex-g-1 cm-padding-5 app-border-color_ex-right">年柱</view>
              <view class="cm-flex-g-1 cm-padding-5 app-border-color_ex-right">月柱</view>
              <view class="cm-flex-g-1 cm-padding-5 app-border-color_ex-right">日柱</view>
              <view class="cm-flex-g-1 cm-padding-5" :class="[isDestinyShow ? 'app-border-color_ex-right' : '']">时柱</view>
              <view class="cm-flex-g-1 cm-padding-5 app-border-color_ex-right" v-if="isDestinyShow">大运</view>
              <view class="cm-flex-g-1 cm-padding-5 app-border-color_ex-right" v-if="isDestinyShow">流年</view>
              <view class="cm-flex-g-1 cm-padding-5" v-if="isDestinyShow">流月</view>
            </view>
          </cm-label-text>
          <cm-label-text label-width="50"
            label="干支"
            border-split border-bottom content-no-padding>
            <view class="cm-flex cm-text-center" style="height: 60px;">
              <view class="cm-flex cm-flex-col cm-flex-j-around cm-flex-g-1"
                :class="[ (index === baziGanzhi.length - 1 ? '' : 'app-border-color_ex-right'), (isDestinyShow ? 'bazi-template-ganzhi-7' : 'bazi-template-ganzhi-4') ]"
                v-for="(item, index) in baziGanzhi" :key="index">             
                <bagua-element v-if="!item.beforeDestiny" size="16" ele-class="cm-bold" :bagua="item.gan"
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(item.gan)">
                  <template v-slot:rightBottom>
                    <view class="app-alert-color" v-if="index === 2">日</view>
                    <view class="app-alert-color" v-else>{{ item.gan.relations.tenGodToDayGan.simTxt }}</view>
                  </template>
                </bagua-element>
                <view v-else class="cm-text-16 cm-bold">运</view>
                <bagua-element v-if="!item.beforeDestiny" size="16" ele-class="cm-bold" :bagua="item.zhi"
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(item.zhi)">
                  <template v-slot:rightBottom>
                    <view class="app-alert-color">{{ item.zhi.relations.tenGodToDayGan.simTxt }}</view>
                  </template>
                </bagua-element>
                <view v-else class="cm-text-16 cm-bold">前</view>
              </view>
            </view>
          </cm-label-text>
          <cm-label-text label-width="50"
            label="地支藏干"
            border-split border-bottom content-no-padding>
            <view class="cm-flex cm-text-center" style="height: 85px;">
              <view class="cm-flex cm-flex-col cm-flex-j-around cm-flex-g-1"
                :class="[ (index === baziGanzhi.length - 1 ? '' : 'app-border-color_ex-right'), (isDestinyShow ? 'bazi-template-ganzhi-7' : 'bazi-template-ganzhi-4') ]"
                v-for="(item, index) in baziGanzhi" :key="index">
                <bagua-element size="14" v-for="(hiddenItem, hiddenIndex) in item.zhi.hiddenGans"
                  :key="hiddenIndex"
                  :bagua="hiddenItem"
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(hiddenItem)">
                  <template v-slot:rightBottom>
                    <view class="app-alert-color">{{ hiddenItem.relations.tenGodToDayGan.simTxt }}</view>
                  </template>
                </bagua-element>
              </view>
            </view>
          </cm-label-text>

          <!-- 菜单 -->
          <cm-scroll-bar cm-class="cm-w-100 app-border-color_ex-bottom" ref="scrollBar"
            height="40" :list="navData"
            @click="navSelectHandler"></cm-scroll-bar>          
        </view>
      </cm-sticky>
      
      <cm-divider><view class="cm-bold">命造信息</view></cm-divider>
      <cm-label-text label-width="50"
        border-top border-bottom border-split content-no-padding>
        <view class="cm-flex cm-text-center">
          <view class="cm-flex-g-1 cm-padding-10 app-border-color_ex-right">年柱</view>
          <view class="cm-flex-g-1 cm-padding-10 app-border-color_ex-right">月柱</view>
          <view class="cm-flex-g-1 cm-padding-10 app-border-color_ex-right">日柱</view>
          <view class="cm-flex-g-1 cm-padding-10">时柱</view>
        </view>
      </cm-label-text>
      <cm-label-text label="纳音" label-class="cm-bold" label-width="50"
        content-no-padding border-split border-bottom>
        <view class="cm-flex cm-text-center">
          <view class="cm-flex-g-1 cm-padding-10" v-for="(count, index) in 4" :key="index"
            :class="[ index === 3 ? '' : 'app-border-color_ex-right' ]">
            <bagua-element size="14" :bagua="baziGanzhi[index].nayin" wuxing></bagua-element>
          </view>
        </view>
      </cm-label-text>
      <cm-label-text label="地利" label-width="50" label-class="cm-bold"
        content-no-padding border-split border-bottom>
        <view class="cm-flex cm-text-center">
          <view class="cm-flex-g-1 cm-padding-10 app-border-color_ex-right">年干</view>
          <view class="cm-flex-g-1 cm-padding-10 app-border-color_ex-right">月干</view>
          <view class="cm-flex-g-1 cm-padding-10 app-border-color_ex-right">日干</view>
          <view class="cm-flex-g-1 cm-padding-10">时干</view>
        </view>
      </cm-label-text>
      <cm-label-text label="年支" label-width="50"
        content-no-padding border-split border-bottom>
        <view class="cm-flex cm-text-center">
          <view class="cm-flex-g-1 cm-padding-10 cm-w-25" v-for="(count, index) in 4" :key="index"
            :class="[ index === 3 ? '' : 'app-border-color_ex-right' ]">
            {{ baziGanzhi[index].gan.relations.twelveStateToZhi[0] }}
          </view>          
        </view>
      </cm-label-text>
      <cm-label-text label="月支" label-width="50"
        content-no-padding border-split border-bottom>
        <view class="cm-flex cm-text-center">
          <view class="cm-flex-g-1 cm-padding-10 cm-w-25" v-for="(count, index) in 4" :key="index"
            :class="[ index === 3 ? '' : 'app-border-color_ex-right' ]">
            {{ baziGanzhi[index].gan.relations.twelveStateToZhi[1] }}
          </view>          
        </view>
      </cm-label-text>
      <cm-label-text label="日支" label-width="50"
        content-no-padding border-split border-bottom>
        <view class="cm-flex cm-text-center">
          <view class="cm-flex-g-1 cm-padding-10 cm-w-25" v-for="(count, index) in 4" :key="index"
            :class="[ index === 3 ? '' : 'app-border-color_ex-right' ]">
            {{ baziGanzhi[index].gan.relations.twelveStateToZhi[2] }}
          </view>          
        </view>
      </cm-label-text>
      <cm-label-text label="时支" label-width="50"
        content-no-padding border-split border-bottom>
        <view class="cm-flex cm-text-center">
          <view class="cm-flex-g-1 cm-padding-10 cm-w-25" v-for="(count, index) in 4" :key="index"
            :class="[ index === 3 ? '' : 'app-border-color_ex-right' ]">
            {{ baziGanzhi[index].gan.relations.twelveStateToZhi[3] }}
          </view>          
        </view>
      </cm-label-text>
      <cm-label-text label="天时" label-class="cm-bold" label-width="50"
        content-no-padding border-split border-bottom>
        <view class="cm-flex cm-text-center">
          <view class="cm-flex-g-1 cm-padding-10 cm-w-25" v-for="(count, index) in 4" :key="index"
            :class="[ index === 3 ? '' : 'app-border-color_ex-right' ]">
            {{ baziGanzhi[index].gan.relations.seasonPower }}
          </view>          
        </view>
      </cm-label-text>

      <!-- 区域检查组件：流年大运 -->
      <view :id="idPrefix + navData[2].id"></view>
      <cm-divider><view class="cm-bold">大运</view></cm-divider>
      <cm-label-text label="起运时间" label-width="80" border-split border-top border-bottom>{{ bigDestinyStartText }}({{ baziProxy.bigDestinyAge }}周岁起运)</cm-label-text>
      <view class="cm-flex cm-flex-j-around cm-text-center cm-padding-5 app-border-color_ex-bottom">
        <view class="bazi-template-years-item" v-for="(item, index) in baziProxy.bigDestinyList" :key="index">
          <view>
            <bagua-element size="14" :bagua="item.ganzhi.gan"
              :ele-class="index === baziProxy.bigDestinyCurrent ? 'app-theme-color cm-bold' : 'cm-bold'"
              :season="seasonIndex" :compare-selected="compareSelected"
              @click="elementClickHandler(item.ganzhi.gan)">
              <template v-slot:rightBottom>
                <view class="app-alert-color">{{ item.ganzhi.gan.relations.tenGodToDayGan.simTxt }}</view>
              </template>
            </bagua-element>            
          </view>
          <view>
            <bagua-element size="14" :bagua="item.ganzhi.zhi"
              :ele-class="index === baziProxy.bigDestinyCurrent ? 'app-theme-color cm-bold' : 'cm-bold'"
              :season="seasonIndex" :compare-selected="compareSelected"
              @click="elementClickHandler(item.ganzhi.zhi)">
              <template v-slot:rightBottom>
                <view class="app-alert-color">{{ item.ganzhi.zhi.relations.tenGodToDayGan.simTxt }}</view>
              </template>
            </bagua-element>            
          </view>
          <view class="cm-text-12 cm-margin-top-5">{{ item.age }}岁</view>
          <view class="cm-text-12 cm-margin-top-5">{{ item.year }}</view>
          <cm-radio class="cm-margin-top-5" type="primary" :checked="index === baziProxy.bigDestinySelected" scale="0.8"
            @click="bigDestinySetHandler(index)"></cm-radio>
        </view>
      </view>
      <cm-divider><view class="cm-bold">流年</view></cm-divider>
      <view class="cm-padding-10 app-border-color_ex-top app-border-color_ex-bottom">
        <text v-if="baziProxy.bigDestinySelected === 0">起运前 流年如下</text>
        <text v-else>{{ baziProxy.bigDestinyList[baziProxy.bigDestinySelected].ganzhi.name }}大运 流年如下
          <text class="cm-bold app-theme-color">(此处年份特指对应岁数生日当天的农历年份)</text>
        </text>
      </view>
      <view class="cm-flex cm-flex-j-around cm-text-center cm-padding-5 app-border-color_ex-bottom">
        <view class="bazi-template-years-item" v-for="(item, index) in baziProxy.baziYearsList" :key="index">
          <view>
            <bagua-element size="14" :bagua="item.ganzhi.gan"
              :ele-class="index === baziProxy.baziYearsCurrent ? 'app-theme-color cm-bold' : 'cm-bold'"
              :season="seasonIndex" :compare-selected="compareSelected"
              @click="elementClickHandler(item.ganzhi.gan)">
              <template v-slot:rightBottom>
                <view class="app-alert-color">{{ item.ganzhi.gan.relations.tenGodToDayGan.simTxt }}</view>
              </template>
            </bagua-element>            
          </view>
          <view>
            <bagua-element size="14" :bagua="item.ganzhi.zhi"
              :ele-class="index === baziProxy.baziYearsCurrent ? 'app-theme-color cm-bold' : 'cm-bold'"
              :season="seasonIndex" :compare-selected="compareSelected"
              @click="elementClickHandler(item.ganzhi.zhi)">
              <template v-slot:rightBottom>
                <view class="app-alert-color">{{ item.ganzhi.zhi.relations.tenGodToDayGan.simTxt }}</view>
              </template>
            </bagua-element>            
          </view>
          <view class="cm-text-12 cm-margin-top-5">{{ item.age }}岁</view>
          <view class="cm-text-12 cm-margin-top-5">{{ item.year }}</view>
          <cm-radio class="cm-margin-top-5" type="primary" :checked="index === baziProxy.baziYearsSelected" scale="0.8"
            @click="baziYearsSetHandler(index)"></cm-radio>
        </view>
      </view>
      <cm-divider><view class="cm-bold">流月</view></cm-divider>
      <view class="cm-padding-10 app-border-color_ex-top app-border-color_ex-bottom">
        {{ baziProxy.baziYearsList[baziProxy.baziYearsSelected].ganzhi.name }}流年 流月如下
      </view>
      <view class="cm-flex cm-flex-j-around cm-flex-wrap cm-text-center cm-padding-5 app-border-color_ex-bottom">
        <view :class="windowWidth > 400 ? 'bazi-template-months-item' : 'bazi-template-months-item wrap'" v-for="(item, index) in baziProxy.baziMonthsList" :key="index">
          <view>
            <bagua-element size="14" :bagua="item.gan"
              :ele-class="index === baziProxy.baziMonthsCurrent ? 'app-theme-color cm-bold' : 'cm-bold'"
              :season="seasonIndex" :compare-selected="compareSelected"
              @click="elementClickHandler(item.gan)">
              <template v-slot:rightBottom>
                <view class="app-alert-color">{{ item.gan.relations.tenGodToDayGan.simTxt }}</view>
              </template>
            </bagua-element>            
          </view>
          <view>
            <bagua-element size="14" :bagua="item.zhi"
              :ele-class="index === baziProxy.baziMonthsCurrent ? 'app-theme-color cm-bold' : 'cm-bold'"
              :season="seasonIndex" :compare-selected="compareSelected"
              @click="elementClickHandler(item.gan)">
              <template v-slot:rightBottom>
                <view class="app-alert-color">{{ item.zhi.relations.tenGodToDayGan.simTxt }}</view>
              </template>
            </bagua-element>            
          </view>
          <cm-radio class="cm-margin-top-5" type="primary" :checked="index === baziProxy.baziMonthsSelected" scale="0.8"
            @click="baziMonthsSetHandler(index)"></cm-radio>
        </view>
      </view>
    </view>
    
    <!-- 底部工具栏 -->
    <bagua-tool ref="baguaTool" :options="toolOptions" @change="toolChangeHandler"></bagua-tool>
    <!-- 载入 -->
    <cm-loading @loading="init"></cm-loading>
  </view>
</template>

<script src="./baziTemplate.js"></script>

<style lang="stylus">
@import './baziTemplate.styl'
</style>
